<template>
  <!-- 组织机构 -->
  <!--设置 height="600" 可固定表头-->
  <div class="organization">
    <div class="tableContent">
      <el-tooltip
        class="item"
        effect="dark"
        content="添加组织机构"
        placement="top"
      >
        <img
          src="../../../assets/addScoreList.png"
          alt=""
          class="add"
          style="left: 418px"
          @click="addTableItem"
      /></el-tooltip>
      <el-table
        v-loading="loading"
        element-loading-text="加载中..."
        :data="tableData"
        style="width: 100%"
        height="700"
        border
        row-key="id"
        :tree-props="{ children: 'children' }"
        empty-text="暂无组织机构数据"
        :cell-style="{ textAlign: 'center', borderColor: '#E6EBFF' }"
        :header-cell-style="{
          textAlign: 'center',
          background: '#F1F5FF',
          borderColor: '#E6EBFF',
        }"
        :cell-class-name="cellStyle"
      >
        <!-- <el-table-column label="序号" width="220" type="index">
          <template slot-scope="scope">
            <div>
              <el-tooltip
                class="item"
                effect="dark"
                content="删除"
                placement="top"
              >
                <img
                  src="@/assets/delfunction.png"
                  alt=""
                  class="orderbtn"
                  @click="deleteItem(scope.row)"
              /></el-tooltip>
              <span>{{ scope.row.ordernum + 1 }}</span>
              <el-tooltip
                class="item"
                effect="dark"
                content="添加专业"
                placement="top"
                v-if="scope.row.level === 0"
              >
                <img
                  src="@/assets/addScoreList.png"
                  alt=""
                  class="orderbtn"
                  @click="addChildrenItem(scope.row)"
                  v-if="scope.row.level < 2"
                />
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="添加班级"
                placement="top"
                v-if="scope.row.level === 1"
              >
                <img
                  src="@/assets/addScoreList.png"
                  alt=""
                  class="orderbtn"
                  @click="addChildrenItem(scope.row)"
                  v-if="scope.row.level < 2"
                />
              </el-tooltip>
              <img src="@/assets/addScoreList.png" alt="" class="orderbtn" @click="addChildrenItem(scope.row)" v-if="scope.row.level < 2">
            </div>
            <div v-if="scope.row.isEdit === false">
          <img src="@/assets/delfunction.png" alt="" class="orderbtn" @click="deleteItem(scope.row)">
            <span>{{scope.row.ordernum}}</span>
            <img src="@/assets/addScoreList.png" alt="" class="orderbtn" @click="addChildrenItem(scope.row)" v-if="scope.row.level < 2">
            </div>
            <div v-else>
               <input type="number" name="" id="" v-model="scope.row.ordernum" >
            </div>
          </template>
        </el-table-column> -->
        <el-table-column label="机构名称" width="440">
          <template slot-scope="scope">
            <div
              v-if="scope.row.name === null || scope.row.name === ''"
              style="display: inline-block"
            >
              <!-- <span>暂未设置名称</span> -->
              <div v-if="scope.row.isEdit === false">
                <span>暂未设置名称</span>
              </div>
              <div v-else class="nameInput">
                <input
                  type="text"
                  :placeholder="scope.row.name"
                  v-model="scope.row.name"
                  maxlength="25"
                />
              </div>
              <el-tooltip
                class="item"
                effect="dark"
                content="删除"
                placement="top"
              >
                <img
                  src="@/assets/delfunction.png"
                  alt=""
                  class="orderbtn"
                  style="left: 10px; top: 3px"
                  @click="deleteItem(scope.row)"
              /></el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="添加专业"
                placement="top"
                v-if="scope.row.level === 0"
              >
                <img
                  src="@/assets/addScoreList.png"
                  alt=""
                  class="orderbtn"
                  style="right: 10px; top: 3px"
                  @click="addChildrenItem(scope.row)"
                  v-if="scope.row.level < 2"
                />
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="添加班级"
                placement="top"
                v-if="scope.row.level === 1"
              >
                <img
                  src="@/assets/addScoreList.png"
                  alt=""
                  class="orderbtn"
                  style="right: 10px; top: 3px"
                  @click="addChildrenItem(scope.row)"
                  v-if="scope.row.level < 2"
                />
              </el-tooltip>
            </div>
            <div v-else style="display: inline-block">
              <div v-if="scope.row.isEdit === false">
                <span
                  style="cursor: pointer; color: #2fc0e0"
                  @click="nameClick(scope.row.id)"
                  >{{ scope.row.name }}</span
                >
              </div>
              <div v-else class="nameInput">
                <input
                  type="text"
                  :placeholder="scope.row.name"
                  v-model="scope.row.name"
                  maxlength="25"
                />
              </div>
              <el-tooltip
                class="item"
                effect="dark"
                content="删除"
                placement="top"
              >
                <img
                  src="@/assets/delfunction.png"
                  alt=""
                  class="orderbtn"
                  style="left: 10px; top: 3px"
                  @click="deleteItem(scope.row)"
              /></el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="添加专业"
                placement="top"
                v-if="scope.row.level === 0"
              >
                <img
                  src="@/assets/addScoreList.png"
                  alt=""
                  class="orderbtn"
                  style="right: 10px; top: 3px"
                  @click="addChildrenItem(scope.row)"
                  v-if="scope.row.level < 2"
                />
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="添加班级"
                placement="top"
                v-if="scope.row.level === 1"
              >
                <img
                  src="@/assets/addScoreList.png"
                  alt=""
                  class="orderbtn"
                  style="right: 10px; top: 3px"
                  @click="addChildrenItem(scope.row)"
                  v-if="scope.row.level < 2"
                />
              </el-tooltip>
            </div>
            <!-- <span>{{scope.row.name}}</span> -->
          </template>
          <!-- <slot-scope="scope" v-else>
          <span>编辑</span>
          </slot-scope=> -->
        </el-table-column>
        <el-table-column width="60" label="ID" type="" prop="id">
        </el-table-column>
        <el-table-column label="机构人数" width="120">
          <template slot-scope="scope">
            <div>
              <span>{{ scope.row.allCount }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="本机构人数" width="120">
          <template slot-scope="scope">
            <div @click="toUser(scope.row)" style="cursor: pointer">
              <span class="nowEvaluation">{{ scope.row.userCount }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="机构负责人">
          <template slot-scope="scope">
            <div class="roleContent">
              <div v-show="scope.row.isEdit === false" class="initRole">
                <div
                  v-for="(item, index) in scope.row.userPersonName.slice(0, 6)"
                  class="item"
                  :key="index"
                >
                  <p v-if="item">{{ item.userName }}</p>
                </div>
                <div class="people" v-if="scope.row.userPersonName.length > 6">
                  等{{ scope.row.userPersonName.length }}人
                </div>
              </div>
              <div v-show="scope.row.isEdit === true" class="changeRole">
                <div
                  v-if="initRoleList.length > 0"
                  class="roleChange"
                  style="display: flex"
                >
                  <div
                    v-for="ele in initRoleList.slice(0, 6)"
                    :key="ele.userId"
                  >
                    <!-- <img :src="ele.userUrl" alt=""> -->
                    <p>{{ ele.userName }}</p>
                  </div>
                  <div class="people" v-if="initRoleList.length > 6">
                    等{{ initRoleList.length }}人
                  </div>
                </div>
                <div v-else><span>未选择</span></div>
                <img
                  src="@/assets/missionerplus.png"
                  alt=""
                  width="41px"
                  @click="addRole(scope.row)"
                />
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="170">
        </el-table-column>
        <!-- <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <div class="btn" v-if="scope.row.isEdit === false">
              <el-tooltip
                class="item"
                effect="dark"
                content="上移"
                placement="top"
              >
                <img
                  src="@/assets/up.png"
                  alt=""
                  @click="moveItem(scope.row, 1)"
                />
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="下移"
                placement="top"
              >
                <img
                  src="@/assets/down.png"
                  alt=""
                  @click="moveItem(scope.row, 2)"
                />
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="编辑"
                placement="top"
                v-if="isHasEdit === false"
              >
                <img
                  src="@/assets/edit.png"
                  alt=""
                  @click="editItem(scope.row)"
                />
              </el-tooltip>
            </div>
            <div class="btn" v-else>
              <el-tooltip
                class="item"
                effect="dark"
                content="提交编辑编辑"
                placement="top"
              >
                <img
                  src="@/assets/edit.png"
                  alt=""
                  @click="completeEdit(scope.row)"
                />
              </el-tooltip>
            </div>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
    <EditRole ref="child" @getRoleList="getRoleList"></EditRole>

    <!-- 机构详情 -->
    <el-drawer
      :withHeader="false"
      :append-to-body="false"
      :modal="false"
      size="40%"
      :visible.sync="drawer"
    >
      <div class="drawerBox">
        <div class="drawerNameBox">
          <span v-show="!isEdit">{{
            selectUserByDepartmentId.departmentName
          }}</span>
          <input
            v-show="isEdit"
            type="text"
            v-model="selectUserByDepartmentId.departmentName"
            @blur="editDepartmentName"
          />
          <i
            v-show="!isEdit"
            class="el-icon-edit"
            style="color: #2fc0e0; cursor: pointer; margin-left: 5px"
            @click="departmentNameClick"
          ></i>
        </div>
        <div
          v-if="selectUserByDepartmentId.departmentParentName !== null"
          class="drawerNameBox drawerNameBox1"
        >
          <span>上级机构：</span>
          <span v-show="!isEdit1">{{
            selectUserByDepartmentId.departmentParentName
          }}</span>
          <el-select
            v-show="isEdit1"
            v-model="departmentUserList.parentId"
            placeholder="请选择上级机构"
            @change="editDepartmentParentName"
          >
            <el-option
              v-for="item in organizationList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <i
            v-show="!isEdit1"
            class="el-icon-edit"
            style="color: #2fc0e0; cursor: pointer; margin-left: 5px"
            @click="organizationClick()"
          ></i>
        </div>
        <div class="chargeBox">
          <div class="chargeTop">
            <span
              v-if="
                Array.isArray(selectUserByDepartmentId.leaderList) &&
                selectUserByDepartmentId.leaderList.length > 0
              "
              >负责人 ({{ selectUserByDepartmentId.leaderList.length }})
              ：</span
            >
            <span v-else>负责人 (0) ：</span>
            <img
              class="choosemember"
              @click="chooseChargeClick"
              src="@/assets/missionerplus.png"
              alt=""
            />
          </div>
          <div class="chargeBottom">
            <div
              v-if="
                Array.isArray(selectUserByDepartmentId.leaderList) &&
                selectUserByDepartmentId.leaderList.length > 0
              "
              style="min-height: 20px"
            >
              <span
                v-for="(item, index) in selectUserByDepartmentId.leaderList"
                :key="index"
                >{{ item.userName }}</span
              >
            </div>
            <div v-else style="height: 20px; text-align: center; color: #999">
              暂无人员
            </div>
          </div>
        </div>
        <div class="teacherBox">
          <div class="teacherTop">
            <span
              v-if="
                Array.isArray(selectUserByDepartmentId.teacherList) &&
                selectUserByDepartmentId.teacherList.length > 0
              "
              >老师 ({{ selectUserByDepartmentId.teacherList.length }}) ：</span
            >
            <span v-else>老师 (0) ：</span>
            <img
              class="choosemember"
              @click="chooseTeacherClick"
              src="@/assets/missionerplus.png"
              alt=""
            />
          </div>
          <div class="teacherBottom">
            <div
              v-if="
                Array.isArray(selectUserByDepartmentId.teacherList) &&
                selectUserByDepartmentId.teacherList.length > 0
              "
              style="min-height: 20px"
            >
              <span
                v-for="(item, index) in selectUserByDepartmentId.teacherList"
                :key="index"
                >{{ item.userName }}</span
              >
            </div>
            <div v-else style="height: 20px; text-align: center; color: #999">
              暂无人员
            </div>
          </div>
        </div>
        <div class="studentBox">
          <div class="studentTop">
            <span
              v-if="
                Array.isArray(selectUserByDepartmentId.studentList) &&
                selectUserByDepartmentId.studentList.length > 0
              "
              >学生 ({{ selectUserByDepartmentId.studentList.length }}) ：</span
            >
            <span v-else>学生 (0) ：</span>
            <img
              class="choosemember"
              @click="chooseStudentClick"
              src="@/assets/missionerplus.png"
              alt=""
            />
          </div>
          <div class="studentBottom">
            <div
              v-if="
                Array.isArray(selectUserByDepartmentId.studentList) &&
                selectUserByDepartmentId.studentList.length > 0
              "
              style="min-height: 20px"
            >
              <span
                v-for="(item, index) in selectUserByDepartmentId.studentList"
                :key="index"
                >{{ item.userName }}</span
              >
            </div>
            <div v-else style="height: 20px; text-align: center; color: #999">
              暂无人员
            </div>
          </div>
        </div>
      </div>
    </el-drawer>

    <!-- 负责人选择弹层 -->
    <el-dialog :visible.sync="showDialog1" width="770" :show-close="false">
      <div class="roleBox">
        <el-transfer
          filterable
          :titles="['人员列表', '已选人员']"
          filter-placeholder="请输入名称"
          v-model="value"
          :data="data"
          :props="{
            key: 'id',
            label: 'name',
          }"
        >
        </el-transfer>
        <div class="btn">
          <button @click="cancel">取消</button>
          <button @click="sendRoleList">确定</button>
        </div>
      </div>
    </el-dialog>

    <!-- 选人弹层 -->
    <!-- <EditRoles
      :show-dialog.sync="showDialog"
      :selectUserByDepartmentId.sync="selectUserByDepartmentId"
    ></EditRoles> -->
  </div>
</template>

<script>
import { getOrganize, getSelectTeacher, getSelectStudent, updateDepartmentUser, addOrganize, deleteOrganize, moveProjectMyTask, getSelectUserByDepartmentId, editOrganize, getSselectAllDepart } from '@/api/systemManage/system';
import EditRole from './EditRole.vue';
import EditRoles from './EditRoles.vue';
export default {
  components: {
    EditRole,
    EditRoles
  },
  data() {
    return {
      // 弹层数据---------------------------------
      data: [],
      value: [],
      departmentUserList: {
        departmentId: 0,
        departmentName: '',
        leaderList: [],
        parentId: 0,
        studentList: [],
        teacherList: []
      },
      isWho: 1, // 修改那个 1-负责人 2-老师 3-学生
      // ------------------------
      drawer: false,
      // showDialog: true,
      showDialog1: false,
      selectUserByDepartmentId: {}, // 机构人员
      isEdit: false, // 是否编辑机构名称
      isEdit1: false, // 是否编辑机构名称
      organizationList: [], // 组织机构数据
      value1: '2',

      // --------------------------------------------
      loading: true,
      tableData: [],
      tableData1: [],
      TableItem: {
        children: [],
        createTime: '',
        id: '',
        memo: '',
        name: '',
        ordernum: '',
        parentid: '',
        userCount: '',
        userPersonName: []
      },
      orderNum: 1,
      list: [],
      item: {},
      addInfo: {
        userCount: '',
        name: '',
        ordernum: ''
      },
      editInfo: {
        id: '',
        name: '',
        ordernum: '',
        userIdList: []
      },
      addItemInfo: {
        memo: '',
        name: '',
        ordernum: '',
        parentid: 0
      },
      userIdList: [],
      selectRole: false,
      initRoleList: [],
      isHasEdit: false,
      showRoleList: [] // 保存点击修改时之前的人员展示
    };
  },
  methods: {
    // 获取部门信息
    async getDepartment() {
      this.loading = true;
      const res = await getOrganize();
      // console.log(res);
      this.isHasEdit = false;
      if (res.code === 200) {
        this.loading = false;
        this.tableData = res.data;
        this.tableData1 = res.data;
        // this.list = res.data;
        this.addStatus(this.tableData);
        this.addStatus(this.tableData1);
        this.orderNum = this.tableData.length;
        // console.log(this.tableData);
      }
    },
    // 递归添加状态的属性
    addStatus(list) {
      // console.log('添加状态', list);
      // console.log(this.list);
      list.map(item => {
        item.isEdit = false;
        // item = {...item, isEdit: false};
        this.addStatus(item.children);
      });
      // console.log('添加状态', list);
      // console.log(list);
    },
    // 添加父项
    async addTableItem() {
      this.addItemInfo.ordernum = this.orderNum;
      const data = JSON.stringify(this.addItemInfo);
      const info = JSON.parse(data);
      console.log('111', info);
      // const addinfo = {...info, ordernum: this.orderNum};
      const res = await addOrganize({
        memo: '',
        name: '机构名称',
        ordernum: this.orderNum + 1,
        parentid: 0});
      // console.log(res);
      if (res.code) {
        this.$message({
          showClose: true,
          message: '新增成功',
          type: 'success'
        });
        this.getDepartment();
        // console.log(this.tableData);
      } else {
        // this.$message.error('新增失败');
        this.$message({
          showClose: true,
          message: '删除失败',
          type: 'error'
        });
      }
      // this.addStatus(this.tableData);
      // this.tableData = this.tableData1;
      this.isHasEdit = false;
      this.getDepartment();
      // this.$forceUpdate();
      // console.log(this.tableData);
    },
    // 删除项
    async deleteItem(val) {
      // console.log(val.id);
      this.$confirm('确认删除改项数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await deleteOrganize({id: val.id});
        // console.log(res);
        if (res.code) {
          this.$message({
            showClose: true,
            message: '删除成功',
            type: 'success'
          });
          this.getDepartment();
        } else {
          this.$message({
            showClose: true,
            message: '删除失败',
            type: 'error'
          });
        }
      }).catch(() => {
        this.$message({
          showClose: true,
          type: 'info',
          message: '已取消删除'
        });
      });
      this.isHasEdit = false;
    },
    // 添加子项
    async addChildrenItem(val) {
      // console.log('子项', val);
      const res = await addOrganize({
        memo: '',
        name: '机构名称',
        ordernum: val.children.length,
        parentid: val.id});
      // console.log(res);
      if (res.code === 200) {
        this.$message({
          showClose: true,
          message: '新增成功',
          type: 'success'
        });
        this.getDepartment();
      } else {
        // this.$message.error('新增失败');
        this.$message({
          showClose: true,
          message: '新增失败',
          type: 'error'
        });
      }
      // this.addStatus(this.tableData1);
      // this.tableData = this.tableData1;
      this.isHasEdit = false;
      this.getDepartment();
    },
    // 编辑机构负责人
    addRole(val) {
      // console.log(val.userPersonName);
      this.$refs.child.openEdit(val.id, val.userPersonName);
      // console.log(this.$refs.child);
    },
    // 获取用户选择的负责人
    getRoleList(val) {
      // this.userIdList = val;
      // console.log('选择的人', val);
      // console.log('val.userPersonName', val.userPersonName);
      // console.log(val);
      this.initRoleList = val;
      this.selectRole = true;
      if (val.length > 0) {
        this.userIdList = [];
        val.filter(item => {
          this.userIdList.push(item.userId);
        });
      }
      // console.log(this.editInfo);
      // console.log(111);
    },
    // 用户点击编辑
    editItem(val) {
      console.log(val);
      // this.userIdList = val.userPersonName;
      if (val.userPersonName.length > 0) {
        val.userPersonName.forEach(item => {
          if (item !== null) {
            this.userIdList.push(item.userId);
          }
        });
      }
      this.initRoleList = val.userPersonName;
      // console.log('showRoleList', this.showRoleList);
      // console.log('val.userPersonName', val.userPersonName);
      this.isHasEdit = true;
      // userPersonName
      // val.userPersonName.filter(item => {
      //   this.userIdList.push(item.userId);
      // });
      // console.log(this.userIdList);
      val.isEdit = !val.isEdit;
      this.$forceUpdate(); // 强制刷新
    },
    // 提交编辑
    async completeEdit(val) {
      // console.log(this.userIdList);
      // console.log(this.userIdList);
      this.isHasEdit = false;
      // if ()
      const res = await editOrganize({id: val.id, name: val.name, ordernum: val.ordernum, userIdList: this.userIdList});
      // console.log(res);
      if (res.code === 200) {
        this.$message({
          showClose: true,
          message: '修改成功',
          type: 'success'
        });
      } else {
        this.$message({
          showClose: true,
          message: '修改失败',
          type: res.msg
        });
      }
      this.initRoleList = [];
      val.isEdit = !val.isEdit;
      this.$forceUpdate();
      this.getDepartment();
      this.userIdList = [];
      // console.log(this.tableData);
    },
    // 移动
    async moveItem(val1, val2) {
      // console.log(this.tableData);
      // console.log(val1, val2);
      const res = await moveProjectMyTask(val1.id, val1.ordernum, val1.parentid, val2);
      // console.log(res);
      if (res.code === 200) {
        this.$message({
          showClose: true,
          message: '移动成功',
          type: 'success'
        });
        this.getDepartment();
      } else {
        // this.$message.error(`移动失败, ${res.msg}`);
        this.$message({
          showClose: true,
          message: `移动失败, ${res.msg}`,
          type: 'error'
        });
      }
      this.isHasEdit = false;
    },
    // 设置表格第三列文字为左对齐
    cellStyle({ row, column, rowIndex, columnIndex }) {
      // 第n(3)列的时候，才改变
      if (columnIndex === 0) {
        return 'oneBox';
      }
      if (columnIndex === 2) {
        return `colStyle`;
      } else {
        return `notcolStyle`;
      }
    },
    toUser(val) {
      // console.log(val.id);
      this.$emit('receive', val.id);
    },

    // 弹层--------------------------------
    // 点击机构名称事件
    async nameClick(val) {
      // console.log(val);
      sessionStorage.setItem('departmentId', val);
      const res = await getSelectUserByDepartmentId({ departmentId: val });
      // console.log(res);
      this.selectUserByDepartmentId = res.data;
      console.log(this.selectUserByDepartmentId);
      const res1 = await getSselectAllDepart();
      // console.log(res1);
      this.organizationList = res1.data;
      // console.log(this.organizationList);
      this.drawer = true;
    },
    // 编辑机构名称按钮
    departmentNameClick() {
      this.departmentUserList.leaderList = [];
      this.departmentUserList.teacherList = [];
      this.departmentUserList.studentList = [];
      this.departmentUserList.departmentId = this.selectUserByDepartmentId.departmentId;
      this.departmentUserList.departmentName = this.selectUserByDepartmentId.departmentName;
      this.departmentUserList.parentId = this.selectUserByDepartmentId.departmentParentId;
      // console.log(this.departmentUserList.parentId);
      this.selectUserByDepartmentId.leaderList.forEach(item => {
        this.departmentUserList.leaderList.push(item.userId);
      });
      this.selectUserByDepartmentId.teacherList.forEach(item => {
        this.departmentUserList.teacherList.push(item.userId);
      });
      this.selectUserByDepartmentId.studentList.forEach(item => {
        this.departmentUserList.studentList.push(item.userId);
      });
      this.isEdit = true;
    },
    // 编辑机构名称
    async editDepartmentName() {
      this.departmentUserList.departmentName = this.selectUserByDepartmentId.departmentName;
      if (this.departmentUserList.departmentName === '') {
        return this.$message({
          showClose: true,
          message: '请输入机构名称！',
          type: 'warning'
        });
      }
      const departmentId = sessionStorage.getItem('departmentId');
      const res = await updateDepartmentUser(this.departmentUserList);
      console.log(res);
      if (res.code === 200) {
        this.getDepartment();
        this.nameClick(departmentId);
        this.$message({
          showClose: true,
          message: res.msg,
          type: 'success'
        });
        this.isEdit1 = false;
      } else {
        this.$message({
          showClose: true,
          message: res.msg,
          type: 'error'
        });
      }
      this.isEdit = false;
    },
    // 编辑机构上级名称按钮
    organizationClick() {
      this.departmentUserList.leaderList = [];
      this.departmentUserList.teacherList = [];
      this.departmentUserList.studentList = [];
      this.departmentUserList.departmentId = this.selectUserByDepartmentId.departmentId;
      this.departmentUserList.departmentName = this.selectUserByDepartmentId.departmentName;
      this.departmentUserList.parentId = this.selectUserByDepartmentId.departmentParentId;
      // console.log(this.departmentUserList.parentId);
      this.selectUserByDepartmentId.leaderList.forEach(item => {
        this.departmentUserList.leaderList.push(item.userId);
      });
      this.selectUserByDepartmentId.teacherList.forEach(item => {
        this.departmentUserList.teacherList.push(item.userId);
      });
      this.selectUserByDepartmentId.studentList.forEach(item => {
        this.departmentUserList.studentList.push(item.userId);
      });
      this.isEdit1 = true;
      // console.log(this.departmentUserList);
    },
    // 编辑机构上级名称
    async editDepartmentParentName() {
      const departmentId = sessionStorage.getItem('departmentId');
      const res = await updateDepartmentUser(this.departmentUserList);
      console.log(res);
      if (res.code === 200) {
        this.getDepartment();
        this.nameClick(departmentId);
        this.$message({
          showClose: true,
          message: res.msg,
          type: 'success'
        });
        this.isEdit1 = false;
      } else {
        this.$message({
          showClose: true,
          message: res.msg,
          type: 'error'
        });
      }
    },
    // 机构负责人编辑按钮
    chooseChargeClick() {
      this.isWho = 1;
      this.value = [];
      this.data = this.selectUserByDepartmentId.teacherList.map(item => {
        item.id = item.userId;
        item.name = item.userName;
        return item;
      });
      // console.log(this.data);
      this.selectUserByDepartmentId.leaderList.forEach(item => {
        this.value.push(item.userId);
      });
      this.showDialog1 = true;
    },
    // 机构老师编辑按钮
    async chooseTeacherClick() {
      this.isWho = 2;
      this.value = [];
      const {data} = await getSelectTeacher();
      // console.log(data);
      this.data = data;
      this.selectUserByDepartmentId.teacherList.forEach(item => {
        this.value.push(item.userId);
      });
      this.showDialog1 = true;
    },
    // 机构学生编辑按钮
    async chooseStudentClick() {
      this.isWho = 3;
      this.value = [];
      const {data} = await getSelectStudent();
      // console.log(data);
      this.data = data;
      this.selectUserByDepartmentId.studentList.forEach(item => {
        this.value.push(item.userId);
      });
      this.showDialog1 = true;
    },
    // 选人弹层确定按钮
    async sendRoleList() {
      this.departmentUserList = {
        departmentId: 0,
        departmentName: '',
        leaderList: [],
        parentId: 0,
        studentList: [],
        teacherList: []
      };
      // console.log(this.isWho);
      // console.log(this.data);
      // console.log(this.value);
      const departmentId = sessionStorage.getItem('departmentId');
      this.departmentUserList.departmentId = this.selectUserByDepartmentId.departmentId;
      this.departmentUserList.departmentName = this.selectUserByDepartmentId.departmentName;
      this.departmentUserList.parentId = this.selectUserByDepartmentId.departmentParentId;
      if (this.isWho === 1) {
        this.departmentUserList.leaderList = this.value;
        this.selectUserByDepartmentId.teacherList.forEach(item => {
          this.departmentUserList.teacherList.push(item.userId);
        });
        this.selectUserByDepartmentId.studentList.forEach(item => {
          this.departmentUserList.studentList.push(item.userId);
        });
      } else if (this.isWho === 2) {
        this.selectUserByDepartmentId.leaderList.forEach(item => {
          this.departmentUserList.leaderList.push(item.userId);
        });
        this.departmentUserList.teacherList = this.value;
        this.selectUserByDepartmentId.studentList.forEach(item => {
          this.departmentUserList.studentList.push(item.userId);
        });
      } else if (this.isWho === 3) {
        this.selectUserByDepartmentId.leaderList.forEach(item => {
          this.departmentUserList.leaderList.push(item.userId);
        });
        this.selectUserByDepartmentId.teacherList.forEach(item => {
          this.departmentUserList.teacherList.push(item.userId);
        });
        this.departmentUserList.studentList = this.value;
      }
      const res = await updateDepartmentUser(this.departmentUserList);
      // console.log(res);
      // console.log(departmentId);
      if (res.code === 200) {
        this.getDepartment();
        this.nameClick(departmentId);
        this.$message({
          showClose: true,
          message: res.msg,
          type: 'success'
        });
        this.showDialog1 = false;
      } else {
        this.$message({
          showClose: true,
          message: res.msg,
          type: 'error'
        });
      }
    },
    //  选人弹层取消按钮
    cancel() {
      // 关闭对话框
      this.showDialog1 = false;
    }
  },
  created() {
    this.getDepartment();
  }
};
</script>

<style scoped lang="less">
.organization {
  margin: 0;
  padding: 0;
  // background: white;
  // padding-bottom: 30px;
}
.tableContent {
  // padding-left: 20px;
  // height: 700px;
  overflow-y: scroll;
  box-sizing: border-box;
  position: relative;
  width: 98%;
  margin: auto;
  background: #ffffff;
  margin-top: 30px;
  border-radius: 8px;
  padding-bottom: 50px;
  box-shadow: 1px 2px 3px 0px rgba(153, 153, 153, 0.5);
  /deep/.el-table__body tr,
  /deep/.el-table__body td {
    padding: 0;
    height: 45px !important;
  }
  /deep/.el-table__body tr,
  /deep/.el-table__body td {
    padding: 0;
    font-size: 14px;
    color: #555555;
  }
  /deep/.el-table th {
    color: #333333;
    font-family: PingFangSC-Regular, PingFang SC;
    font-size: 14px;
  }
  .nowEvaluation:hover {
    text-decoration: underline;
    color: #2fc0e0;
  }
  .btn {
    display: flex;
    justify-content: center;
    // text-decoration-color: #2FC0E0;
    cursor: pointer;
    img {
      height: 36px;
      width: 36px;
      margin: 0px 5px;
    }
  }
  .add {
    position: absolute;
    cursor: pointer;
    z-index: 2;
    // left: 240px;
    top: 15px;
    height: 18px;
    width: 18px;
  }
  /deep/ .cell {
    position: relative;
    .orderbtn {
      position: absolute;
      top: 0;
      right: 0;
      cursor: pointer;
      height: 18px;
      width: 18px;
      // margin: 0px 50px;
    }
  }
  .roleContent {
    .initRole {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .item {
      margin: 0px 5px;
      // display: flex;
      // flex-wrap: nowrap;
      // justify-content: center;
      p {
        margin: 0;
        padding: 0;
      }
      img {
        height: 40px;
        width: 40px;
        border-radius: 50%;
        box-shadow: 1px 1px 2px 0px rgba(215, 215, 215, 0.5);
      }
    }
    .people {
      color: #2fc0e0;
      width: 45px;
      height: 45px;
      background: #e8f8fb;
      box-shadow: 1px 1px 2px 0px rgba(215, 215, 215, 0.5);
      border: 3px solid #ffffff;
      border-radius: 50%;
      line-height: 45px;
      text-align: center;
      font-size: 12px;
    }
  }
  input {
    text-align: center;
    border: 0;
    outline: none;
    height: 70px;
    width: 100%;
  }
  .nameInput {
    width: 92%;
    height: 36px;
    // margin-bottom: 20px;
    position: absolute;
    top: 4px;
    z-index: 2;
    right: 20px;
    input {
      width: 100%;
      height: 100%;
    }
  }
  .changeRole {
    display: flex;
    justify-content: center;
    p {
      margin: 0;
      padding: 0;
    }
    img {
      height: 40px;
      width: 40px;
      border-radius: 50%;
      box-shadow: 1px 1px 2px 0px rgba(215, 215, 215, 0.5);
    }
    .roleChange {
      div {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 5px;
      }
    }
  }
  /deep/.el-table tbody td:focus-within,
  .el-table tbody td:hover {
    // background-color: #2FC0E0;
    box-shadow: inset 0 0.005208rem 0.020833rem 0 #2fc0e0,
      inset 0 -0.005208rem 0.020833rem 0 #2fc0e0,
      inset 0.005208rem 0 0.020833rem 0 #2fc0e0,
      inset -0.005208rem 0 0.020833rem 0 #2fc0e0;
  }
}
.drawerBox {
  width: 100%;
  font-size: 14px;
  padding: 20px;
  .drawerNameBox {
    text-align: center;
    margin: 0 auto;
  }
  .drawerNameBox1 {
    text-align: left;
    margin: 20px 0;
  }
  .chargeBox {
    margin-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    .chargeTop {
      height: 40px;
      line-height: 40px;
      margin-bottom: 10px;
    }
    .chargeBottom {
      margin-left: 20px;
      span {
        display: inline-block;
        height: 20px;
        color: #555;
        margin: 10px 10px 0 0;
      }
    }
  }
  .teacherBox {
    margin-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    .teacherTop {
      height: 40px;
      line-height: 40px;
      margin-bottom: 10px;
    }
    .teacherBottom {
      margin-left: 20px;
      span {
        display: inline-block;
        height: 20px;
        color: #555;
        margin: 10px 10px 0 0;
      }
    }
  }
  .studentBox {
    margin-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    .studentTop {
      height: 40px;
      line-height: 40px;
      margin-bottom: 10px;
    }
    .studentBottom {
      margin-left: 20px;
      span {
        display: inline-block;
        height: 20px;
        color: #555;
        margin: 10px 10px 0 0;
      }
    }
  }
  .choosemember {
    cursor: pointer;
    width: 40px;
    height: 40px;
    vertical-align: middle;
  }
}
/deep/.colStyle .cell {
  text-align: center;
}
/deep/ .oneBox {
  .cell {
    padding-left: 80px !important;
    padding-right: 40px !important;
    text-align: left;
  }
}
/* // 修改滚动条样式 */
/deep/::-webkit-scrollbar {
  width: 10px; /*高宽分别对应横竖滚动条的尺寸 */
  max-height: 10px;
}

/* 滚动槽的轨道 */
::-webkit-scrollbar-track {
  border-radius: 30px;
}

/* 滚动条的小滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #2fc0e0;
}
</style>

<style scoped lang="less">
button {
  cursor: pointer;
}
/deep/.el-dialog__header,
/deep/.el-dialog__body {
  padding: 0;
}
/deep/.el-dialog {
  box-shadow: 3px 3px 11px 0px #3d3d3d;
}
/deep/ .el-transfer-panel {
  width: 39%;
  height: 500px;
  .el-transfer-panel__body {
    height: 440px;
  }
  .el-transfer-panel__list {
    height: 390px;
  }
}
/deep/ .el-transfer__buttons {
  width: calc(22% - 60px);
}
.roleBox {
  padding: 30px;
  .btn {
    text-align: center;
    margin-top: 36px;
    padding-bottom: 10px;
    button {
      width: 100px;
      height: 35px;
      background: #e8f8fb;
      border-radius: 4px;
      margin: 0px 42px;
      color: #2fc0e0;
      &:nth-child(2) {
        background: #2fc0e0;
        color: white;
      }
    }
  }
}
</style>
